<!DOCTYPE html>
<html>

<head>
    <title>KDT</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <script src="/kdt.js"></script>
    <script src="/vue.js"></script>
    <script type="text/javascript">
    function initData() {
        window.app.Sid=getCookie('KDT-Admin-Sid')
        var xhr=new XMLHttpRequest()
        xhr.onload=function(e) {
            if (xhr.status==200||xhr.status==304) {
                var o=JSON.parse(xhr.responseText)
                if (o.State=="OK") {
                    window.app.Packs=o.Ps
                }else {
                    if (o.Info=='no packs yet') {
                        document.getElementById('result').innerHTML="No Packs for now"
                    }else {
                        alert(o.Info)
                    }
                }
            }
        }
        var o=new Object()
        o.Info='1'
        xhr.open('POST', '/apis/pack/admin/query/unclaimed', true)
        xhr.send(JSON.stringify(o))
    }
    setTimeout('initData()', 50)
    </script>
</head>

<body style="display: flex;flex-direction: column;align-items: center;margin: 0px;padding: 0px;">
    <div class="head" style="width: 100%;box-shadow: 3px 3px 3px #aaa;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
        <b style="margin-left: 8px;">Unclaimed Packs</b>
        <span>
		<a href="/adminIndex.html" id="mypacks">My packs</a>
		<input type="button" value="admin logout" onclick="setCookie('KDT-Admin-Sid','',0);location.href='/'">
	</span>
    </div>
    <div style="max-width: 500px;width: 100%;display: flex;flex-direction: column;align-items: center;" id="main_container">
        <div v-for='(p,pindex) in Packs' style="box-shadow: 1px 1px 1px #aaa;padding: 5px;margin: 3px;width: 100%;">
            <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;cursor: pointer;">
                <img v-bind:src='getCover(pindex)' style="height: 100px;">
                <div style="display: flex;flex-direction: column;justify-content: space-around;">
                    <b>{{p.Title}}</b>
                    <span style="color: green" v-if='p.DeliveryDots.length>0'>{{p.DeliveryDots[p.DeliveryDots.length-1].Title}}</span>
                </div>
                <input type="button" value="Claim" v-on:click='Claim(pindex)'>
            </div>
        </div>
        <div id="result"></div>
    </div>
    <script type="text/javascript">
	    window.app = new Vue({
	        el: '#main_container',
	        data: {
                Sid:'',
	            Packs: [],
	            getCover: function(pindex) {
	                return '/res/' + (pindex % 8 + 1).toString() + '.jpg'
	            },
	            Claim:function(pindex) {
	            	var xhr=new XMLHttpRequest()
                    xhr.onload=function(e) {
                        if (this.status==200||this.status==304) {
                            var o=JSON.parse(xhr.responseText)
                            if (o.State=="OK") {
                                location.href='/adminIndex.html'
                            }else {
                                alert(o.Info)
                            }
                        }
                    }
                    var o=new Object()
                    o.State=window.app.Sid
                    o.Info=window.app.Packs[pindex].PackId
                    xhr.open('POST', '/apis/pack/admin/claim', true)
                    xhr.send(JSON.stringify(o))
	            }
	        }
	    })
    </script>
</body>

</html>